import React, {PropTypes} from 'react'

class Excel extends React.Component{

  constructor(props) {
    super(props);//第一步，这是必须的
        //不能调用state
    this.state = {//第二步，赋初始值
        header: props.header,
        data: props.initdata
    };
  }

  _renderToolbar() {
    return (
      <div>
        <button className="Button">按钮一</button>
        <a className="Button">按钮二</a>
      </div>
    )
  }

  _renderTableHeader() {
    return (
      <thead>
        <tr>
          {
            this.state.header.map(function(title, idx) {
              return (
                <td key={idx}>{title}</td>
              )
            })
          }
        </tr>
      </thead>
    );
  }

  _renderTableBody() {
    return (
      <tbody>
        {
          this.state.data.map(function(row, rowidx) {
            return (
              <tr key={rowidx}>
                {
                  row.map(function(cell, idx){
                    return (
                      <td key={idx}>{cell}</td>
                    )
                  })
                }
              </tr>
            )
          })
        }
      </tbody>
    )
  }

  render() {
    return (
      <div className="Excel">
        {this._renderToolbar()}
        <br />
        <table>
          {this._renderTableHeader()}
          {this._renderTableBody()}
        </table>
      </div>
    )
  }
}

export default Excel
